<template>
  <div class="home">
    <banner isHome="false"></banner>
    <div class="site-content animate">
      <!--通知栏-->
      <div class="notify">
        <div class="search-result" v-if="hideSlogan">
          <span v-if="searchWords">搜索结果："{{ searchWords }}" 相关文章</span>
          <span v-else-if="category">分类 "{{ category }}" 相关文章</span>
        </div>
        <quote v-else>{{ notice }}</quote>
      </div>

      <!--焦点图-->
      <div class="top-feature" v-if="!hideSlogan">
        <section-title>
          <div style="display: flex; align-items: flex-end">
            聚焦<small-ico></small-ico>
          </div>
        </section-title>
        <div class="feature-content">
          <div
            class="feature-item"
            v-for="item in data.features"
            :key="item.title"
          >
            <Feature :data="item"></Feature>
          </div>
        </div>
      </div>
      <!--文章列表-->
      <a-spin :spinning="data.loading">
        <main class="site-main" :class="{ search: hideSlogan }">
          <section-title v-if="!hideSlogan">推荐</section-title>
          <template v-for="(item, index) in data.postList">
            <post :post="item"></post>
          </template>
        </main>

        <!--加载更多-->
        <div class="more" v-show="hasNextPage">
          <div class="more-btn" @click="data.page.currentPage += 1">More</div>
        </div>
      </a-spin>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, computed, ref, Ref, watch } from "vue";
import banner from "@/components/banner.vue";
import smallIco from "@/components/small-ico.vue";
import sectionTitle from "@/components/section-title.vue";
import quote from "@/components/quote.vue";
import Feature from "@/components/feature.vue";
import post from "@/components/post.vue";
import { useRoute } from "vue-router";
import { getUserPostList } from "@/api/home.ts";
export default defineComponent({
  name: "",
  components: { banner, smallIco, sectionTitle, quote, Feature, post },
  setup: () => {
    const $route = useRoute();
    const data = reactive({
      loading:false,
      features: [
        {
          title: "Akina",
          img: "https://s1.ax1x.com/2020/05/14/YDfRnU.jpg",
          href: "https://zhebk.cn/Web/Akina.html",
        },
      ],
      postList: [],
      page: {
        pageSize: 5,
        currentPage: 1,
        total: 0,
      },
    });

    const searchWords = computed(() => $route.params.words);
    const notice = computed(() => "测试消息");
    const hasNextPage = computed(() => data.postList.length < data.page.total);
    const hideSlogan: Ref<boolean> = ref(false);
    const getList = () => {
      data.loading = true;
      getUserPostList({
        pageSize: data.page.pageSize,
        currentPage: data.page.currentPage,
        id: "114232069947392",
      }).then((res) => {
        data.postList = data.postList.concat(res.data.data || []);
        data.page.total = res.data.count;
        data.page.currentPage = res.data.currentPage;
        data.loading = false;
      });
    };

    getList();
    watch(
      () => data.page.currentPage,
      (currenPage, prev) => {
        getList();
      }
    );
    return { data, notice, hasNextPage, hideSlogan, searchWords };
  },
});
</script>
<style lang="less" scoped>
.site-content {
  width: 40%;
  margin: 0 auto;
  .notify {
    margin: 60px 0;
    border-radius: 3px;
    & > div {
      padding: 20px;
    }
  }

  .search-result {
    padding: 15px 20px;
    text-align: center;
    font-size: 20px;
    font-weight: 400;
    border: 1px dashed #ddd;
    color: #828282;
  }
}

.top-feature {
  width: 100%;
  height: auto;
  margin-top: 30px;

  .feature-content {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    position: relative;

    .feature-item {
      width: 32.9%;
    }
  }
}

.site-main {
  padding-top: 80px;

  &.search {
    padding-top: 0;
  }
}

.more {
  margin: 50px 0;
  .more-btn {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #adadad;
    border: 1px solid #adadad;
    border-radius: 20px;
    margin: 0 auto;
    cursor: pointer;
    &:hover {
      color: #8fd0cc;
      border: 1px dashed #8fd0cc;
    }
  }
}

/******/
@media (max-width: 800px) {
  .top-feature {
    display: none;
  }

  .site-main {
    padding-top: 40px;
  }

  .site-content {
    .notify {
      margin: 30px 0 0 0;
    }

    .search-result {
      margin-bottom: 20px;
      font-size: 16px;
    }
  }
}

/******/
</style>